 <template>
  <div>
    <full-page :options="options" ref="fullpage">
      <div class="section">
        <welcome :show="index" />
      </div>
      <div class="section">
        <Introduce />
      </div>
      <div class="section">
          <Nav />
      </div>
      <div class="section">
        <div class="slide">
          <h1>1</h1>
        </div>
        <div class="slide">
          <h1>2</h1>
        </div>
        <div class="slide">
          <h1>3</h1>
        </div>
      </div>
    </full-page>
  </div>
</template>

<script>
import Welcome from "./components/Welcome";
import Introduce from "./components/Introduce";
import Nav from "./components/Nav";
export default {
  name: "App",
  data() {
    return {
      index: -1,
      options: {
        //是否显示导航，默认为false
        navigation: true,
        afterLoad: (anchorLink, rn) => {
          this.index = rn.index;
          console.log(this.index);
        },
        controlArrowColor: "#fff", //左右箭头颜色
        continuousVertical: true, //最后一页继续下滚到第一页
        continuousHorizontal: true,
      },
    };
  },
  components: {
    Welcome,
    Introduce,
    Nav,
  },
};
</script>

<style>
#fp-nav {
  top: 80%;
}
.fp-prev {
  background: url(./assets/left_control.png);
  width: 100px !important;
  height: 100px !important;
  border-width: 0 !important;
}
.fp-next {
  background: url(./assets/right_control.png);
  width: 100px !important;
  height: 100px !important;
  border-width: 0 !important;
}
</style>
